<template>
    <el-dialog v-model="fromParam.modal" :title="!params.Id ? '新建' : '编辑'" width="640" @close="CloseReset">
        <el-form ref="rulesForm" :model="params" label-width="120" :rules="rules">
            <el-form-item label="接口名称:" prop="Name" required>
                <el-input v-model="params.Name" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="接口路径:" prop="Path" required>
                <el-input v-model="params.Path" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="请求类型:" prop="Type" required>
                <MySelect v-model="params.Type" :options="REQUEST_TYPE" :value="(_, key) => +key"></MySelect>
            </el-form-item>
            <el-form-item label="接口描述:">
                <el-input type="textarea" v-model="params.Desc" placeholder="请输入" :autosize="{ minRows: 1, maxRows: 6 }"
                    resize="none"></el-input>
            </el-form-item>
            <el-form-item label="是否启用:">
                <el-radio-group v-model="params.Enable">
                    <el-radio v-for="state in ENABLE_STATE" :label="state[0]">
                        {{ state[1] }}
                    </el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="modal-footer">
            <el-button @click="CloseReset">取消</el-button>
            <el-button type="primary" @click="UpdateApi">提交</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts" setup>
import { nextTick, ref, watch } from 'vue';
import { PermessionBind } from './Def';
import { FormInstance, FormRules } from 'element-plus';
import { RoleApiApi } from '@/api/permession/bind';
import { REQUEST_TYPE, ENABLE_STATE } from "./ConfigData"
import MessageUti from "@/library/utils/MessageUti"
import { MySelect } from "@/components"

const props = defineProps<{
    fromParam: PermessionBind.EditingDialog,
    param: PermessionBind.ParamState,
    GetData: () => void
}>()

const defaultParams: PermessionBind.ParamsState = {
    Id: undefined,
    Name: '',
    Path: '',
    Type: undefined,
    Desc: '',
    Enable: true
}

const params = ref<PermessionBind.ParamsState>({ ...defaultParams })

const rulesForm = ref<FormInstance>();

const rules = ref<FormRules<PermessionBind.ParamsState>>({
    Name: [{ required: true, message: '接口名称不能为空', trigger: 'blur' }],
    Path: [{ required: true, message: '接口路径不能为空', trigger: 'blur' }],
    Type: [{ required: true, message: '方法类型不能为空', trigger: 'blur' }]
})

watch(() => props.fromParam.row, (val) => {
    params.value = { ...val }
})

const UpdateApi = async () => {
    if (!rulesForm.value) return

    await rulesForm.value.validate((valid) => {
        if (valid) {
            RoleApiApi.UpdateApi({ ...params.value }).then(() => {
                CloseReset()
                props.param.Page = 1
                props.GetData()
                MessageUti.showSuccess(`操作成功`)
            })
        }
    })
}

const CloseReset = () => {
    props.fromParam.modal = false
    nextTick(() => {
        params.value = { ...defaultParams }
        rulesForm.value?.resetFields()
    })
}

</script>

<style scoped></style>